<template>
    <div class="layout-pd">
        <div class="container ">
            <div class="search-btns flex items-center justify-between">
                <div class="btns"></div>
                <div class="search flex-1 mx-4 flex_cen relate">
                    <div class="btns">
                        <el-button v-if="auth(state.isShippingTimeAddBtn)" size="default" color="#18bc9c"
                            @click="addFn">+
                            添加</el-button>
                    </div>
                </div>
            </div>
            <div class="table-class">
                <div class="tables">
                    <table class="order-table header-table">
                        <thead>
                            <tr>
                                <th class="wid30">
                                    <div class="flex_cen_cen">
                                        <div>发货id</div>
                                    </div>
                                </th>
                                <th class="wid80">
                                    <div class="flex_cen_cen">发货时间(/h)</div>
                                </th>
                                <th class="wid80">
                                    <div class="flex_cen_cen">是否禁用</div>
                                </th>
                                <th class="wid80">
                                    <div class="flex_cen_cen">创建时间</div>
                                </th>
                                <!-- <th class="wid100">
                                    <div class="flex_cen_cen">操作</div>
                                </th> -->
                            </tr>
                        </thead>
                    </table>
                    <div class="body-wrapper">
                        <table v-if="state.tableData.length" class="order-table body-table">
                            <tbody>
                                <template v-for="(item, index) in state.tableData" :key="item.id">
                                    <tr>
                                        <td class="wid30">
                                            <div class="flex_cen_cen">{{ item.id }}</div>
                                        </td>
                                        <td class="wid80">
                                            <div class="flex_cen_cen">
                                                <div class="bgnum">{{ item && item.name }}</div>
                                            </div>
                                        </td>
                                        <td class="wid80">
                                            <div class="flex_cen_cen">
                                                <el-switch v-model="item.is_disable" @change="changeStatus(item)"
                                                    :active-value="2" :inactive-value="1" />
                                            </div>
                                        </td>
                                        <td class="wid80">
                                            <div class="flex_cen_cen">
                                                {{ item.create_time }}
                                            </div>
                                        </td>
                                        <!-- <td class="wid100">
                                            <div class="flex_cen_cen">
                                                <el-link v-if="auth(state.isShippingTimeEditBtn)" type="primary"
                                                    @click="editRow(item)">
                                                    编辑
                                                </el-link>
                                            </div>
                                        </td> -->
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                        <div v-else class="no-data">暂无数据</div>
                    </div>
                </div>
                <div class="pagination">
                    <el-pagination v-model:current-page="state.pageSizeObj.curPage"
                        v-model:page-size="state.pageSizeObj.pageSize" :page-sizes="[5, 10, 20, 30, 40]"
                        layout="total, sizes, prev, pager, next, jumper" :total="state.pageSizeObj.total"
                        @size-change="handleSizeChange" @current-change="handleCurChange" />
                </div>
            </div>
        </div>
        <AddMaterial ref="addMaterialRef" @updateList="getData"></AddMaterial>
    </div>
</template>

<script setup name="supplyChainList">
import { } from '@element-plus/icons-vue'
import { deliveryTimeList, updateDeliveryTimelist, } from '/@/api/startfab/index';
import { auth } from '/@/utils/authFunction';
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
const AddMaterial = defineAsyncComponent(() => import('/@/views/startfab/labelManagement/shippingTime/addShippingTime.vue'));
const state = reactive({
    isShippingTimeAddBtn: 'admin:admin:isShippingTimeAdd',
    isShippingTimeEditBtn: 'admin:admin:isShippingTimeEdit',
    formData: {
        title: ''
    },
    pageSizeObj: {
        curPage: 1,
        pageSize: 10,
        total: 0
    },
    columnData: [],
    tableData: []
})
const addMaterialRef = ref()
const showStatus = ref(false)

const handleSizeChange = (val) => {
    state.pageSizeObj.pageSize = val
    getData()
}
const handleCurChange = (val) => {
    state.pageSizeObj.curPage = val
    getData()
}

const addFn = () => {
    addMaterialRef.value.openDialog('add');
};

const editRow = (row) => {
    addMaterialRef.value.openDialog('edit', row)
}
const getData = () => {
    const params = {
        page: state.pageSizeObj.curPage,
        pageNum: state.pageSizeObj.pageSize,
    }
    deliveryTimeList(params).then((res) => {
        showStatus.value = false
        if (res.code === 10000) {
            state.tableData = res.data.list
            state.pageSizeObj.total = res.data.pageInfo.count
        }
    })
}
const changeStatus = (item) => {
    const params = {
        id: item.id,
        is_disable: item.is_disable
    }
    console.log(params, "当前数据改变值params");

    updateDeliveryTimelist(params).then((res) => {
        if (res.code === 10000) {
            ElMessage.success(res.msg);
        }
    })
}


onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
.tips-content {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    right: -2px;
    top: -2px;
    background-color: #f00;
}

.flex_cen {
    display: flex;
    align-items: center;
}

.flex_cen_cen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt5 {
    margin-top: 5px;
}

.mr5 {
    margin-right: 5px;
}

.mr50 {
    margin-right: 50px;
}

.cursors {
    cursor: pointer;
}

.container {
    background: #FFFFFF;
    padding: 15px;

    ::v-deep .search-btns {
        display: flex;
        align-items: center;
        // justify-content: space-between;

        .el-input-group__append {
            padding: 0px 15px;

            .el-icon {
                color: #333333;
                margin-right: 0px;
            }
        }

        .el-button {
            color: #FFFFFF;
        }

        .batch_export {
            margin-left: 10px;
        }
    }

    .table-class {
        margin-top: 10px;
        background: #FFFFFF;

        .tables {
            width: 100%;
            overflow-x: auto;
        }

        .pagination {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        tr th {
            border: 1px solid #eee !important;
            border-bottom: 0px !important;
            background: #f5fbff;
        }

        .header-table {}
    }

    .table-class {
        margin-top: 10px;
        background: #FFFFFF;

        .tables {
            width: 100%;
            overflow-x: auto;
        }

        .pagination {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        tr th {
            border: 1px solid #eee !important;
            border-bottom: 0px !important;
            background: #f5fbff;
        }

        .header-table {
            position: relative;
            z-index: 2;
            background-color: white;
            table-layout: fixed;
        }

        .body-wrapper {
            border-top: none;
        }

        .body-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }

        .order-table {
            width: 100%;
            border-collapse: collapse;

            th,
            td {
                border: 1px solid #eee;
                padding: 4px;
                text-align: left;
                height: 50px;
            }

            td {
                font-size: 14px;
            }
        }

        .flex {
            display: flex;
            align-items: center;

            .icons {
                margin-left: 5px;
                display: flex;
                flex-direction: column;

                .el-icon {
                    height: 10px;
                    cursor: pointer;
                }
            }
        }

        .borders {
            border-left: 1px solid #cccccc;
            border-right: 1px solid #cccccc;
            padding: 10px;
            width: 100%;

            .more_box {
                // float: left;
                width: 100%;
                border-radius: 6px;
                background: #fff;
                margin: 10px 0;
                box-shadow: 0 0 10px rgba(0, 194, 130, 0.05);
                border-radius: 6px;
                transition: 0.5s;
                border: 1px solid rgba(0, 194, 130, 0.2);
                display: flex;
                flex-direction: row;
                // justify-content: space-between;
                font-size: 12px;
                padding: 10px;

                .img1 {
                    width: 50px;
                    height: 100%;
                }

                .div1 {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }
        }
    }
}

.wid30 {
    width: 30px;
    padding: 5px 10px;
}

.wid80 {
    width: 80px;
    padding: 5px 10px;
}

.wid100 {
    width: 100px;
    padding: 5px 10px;
}

.bgnum {
    width: fit-content;
    line-height: 20px;
    margin-right: 10px;
    background: #00c282;
    color: #fff;
    font-style: normal;
    border-radius: 3px;
    font-size: 12px;
    margin: 5px 0 0 0;
    padding: 0 5px;
}

.flex_cen {
    display: flex;
    align-items: center;
}

.icon-name {
    width: 140px;
    height: 40px;
    background: #f4f4f4;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    .ml10 {
        margin-left: 10px;
    }
}

.relate {
    position: relative;
}

.satus-class {
    position: absolute;
    z-index: 9;
    left: 0px;
    top: 40px;
    background: #fff;
    border-radius: 4px;
    padding: 10px 15px 15px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
    width: 370px;

    .title1,
    .title2 {
        width: 100%;
        line-height: 30px;
        background: #eee;
        margin: 10px 0 6px;
        text-indent: 13px;
        border-left: 4px solid #00c282;
        cursor: pointer;
    }
}

.flex_cen_end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.no-data {
    text-align: center;
}
</style>